import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const editorDocs= { source: { code: `data := "---\nmetadata:\n  creationTimestamp: null\nspec:\n  containers: null\nstatus: {}\n"
       component.NewEditor(component.TitleFromString("YAML"), data, false)`
}}

export const editorText = {
  config: {
    value: 'YAML',
  },
  metadata: {
    type: 'text',
  },
};

export const editorView = {
  config: {
    value:
      '---\nmetadata:\n  creationTimestamp: null\nspec:\n  containers: null\nstatus: {}\n',
    language: 'yaml',
    readOnly: false,
    metadata: {
      apiVersion: 'v1',
      kind: 'Pod',
      name: 'nginx-deployment-75c5cb5f44-7wh55',
      namespace: 'default',
    },
  },
  metadata: {
    type: 'editor',
    title: [editorText]
  },
};

export const EditorStoryTemplate = args => ({
  template: `<div class="content-container">
              <div class="content-area" style="height:500px">
                  <app-view-editor [view]="view"></app-view-editor>
              </div>
            </div>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Editor component</h1>
<h2>Description</h2>

<p>
    The Editor component is used to edit YAML configurations of objects.
</p>
<h2>Example</h2>

<Meta title="Components/Editor" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Editor component"
         parameters={{ docs: editorDocs }}
         args= {{ view: editorView }}>
    { EditorStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable name = "Editor component" />
